import React, { memo, useRef, useCallback, useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import './index.scss'
const Drawer = memo(function Drawer(props) {
    const { data = [], type, Selecttab, isdraw, toggle, tabindex } = props
    const wrapperRef = useRef()
    useEffect(() => {
        const dom = wrapperRef.current
        let y = isdraw ? 0 : '-100%'
        dom.style.display = isdraw ? 'block' : 'none'
        dom.style.webkitTransform = `translate3d(0, ${y}, 0)`
        dom.style.transform = `translate3d(0, ${y}, 0)`
    }, [isdraw])
    const toggleDraw = useCallback(() => {
        toggle()
    })
    const onselect = useCallback((tab, i) => {
        Selecttab(tab, i)
    })
    return (
        <div className="drawer">
            <div className="drawer-wrapper" ref={wrapperRef}>
                <div className="flex wrap">
                    {data.map((e, i) => (
                        <DrawerItem
                            key={i}
                            currentIndex={tabindex}
                            tab={e}
                            i={i}
                            onselect={onselect}
                        />
                    ))}
                </div>
                <div className="toggle">
                    <i
                        className="icon-arrow-up icon"
                        onClick={() => {
                            toggleDraw()
                        }}
                    />
                </div>
            </div>
        </div>
    )
})
const DrawerItem = memo(function TabItem(props) {
    const { currentIndex, tab, i, onselect } = props
    return (
        <div
            className={classnames('drawer-item', { current: currentIndex == i })}
            onClick={() => {
                onselect(tab, i)
            }}
        >
            <div className="tab-self">{tab.name}</div>
        </div>
    )
})
export default Drawer
